<template>
	<template v-if="step==1">
		<view class="i" style="margin-top: 36rpx;">为了保证您的账户安全，应有关部门要求，卡券回收需进行实名认证。</view>
		<view class="i">您提交的真实姓名及身份证号信息仅用于实名认证，认证后，交易钱款只能打入与该实名信息一致的微信、支付宝或银行账户，有效防止他人盗取</view>
		<view class="i">平台不会透露您的隐私信息，身份验证遇到问题请联系 <navigator>在线客服</navigator>
		</view>
		<view class="box" style="width: 678rpx;padding: 0 36rpx;margin: 36rpx;">
			<view class="input_box" style="border-bottom: 1px solid #E2E8F0;">
				真实姓名<input placeholder="请输入真实姓名" v-model="name" />
			</view>
			<view class="input_box">身份证号<input placeholder="请输入身份证号" v-model="idCard" maxlength="18" /></view>
		</view>
		<view style="width: 100%;text-align: center;margin-bottom: 36rpx;font-size: 28rpx;">特别提示：请填写本人真实信息，审核后不可修改
		</view>
		<view class="btn" @click="popup"
			:style="{'background-color': (name && idCard)?'#FFDF20':'#CAD5E2','color': (name && idCard)?'##020618':'#ffffff'}">
			确认</view>
	</template>
	<view v-else-if="step==2" class="bg">
		<image src="https://cdn.meijingnet.cn/huishou/static/img/real_name_success.png"
			style="width: 280rpx;height: auto;margin-top: 120rpx;" mode="widthFix" />
		<view style="color: #62748E;font-size: 24rpx;margin-top: 20rpx;">请点击“继续”完成认证</view>
		<navigator open-type="navigateBack" delta="1"
			style="border: 1px solid #CAD5E2;border-radius: 30rpx;height: 100rpx;width: 600rpx;box-sizing: border-box;display: flex;align-items: center;justify-content: center;margin-top: 80rpx;font-size: 34rpx;">
			继续</navigator>
	</view>
	<view v-else-if="step==3" class="bg">
		<image src="https://cdn.meijingnet.cn/huishou/static/img/real_name_fail.png"
			style="width: 280rpx;height: auto;margin-top: 120rpx;" mode="widthFix" />
		<view style="color: #62748E;font-size: 24rpx;margin-top: 20rpx;">请核实身份信息，点击"重新认证"</view>
		<view @click="name='';idCard='';step=1"
			style="border: 1px solid #CAD5E2;border-radius: 30rpx;height: 100rpx;width: 600rpx;box-sizing: border-box;display: flex;align-items: center;justify-content: center;margin-top: 80rpx;font-size: 34rpx;">
			重新认证</view>
	</view>

	<uni-popup ref="popup" type="bottom" border-radius="30rpx 30rpx 0 0" background-color="#fff" safe-area>
		<view
			style="display: flex;align-items: center;justify-content: flex-end;height: 112rpx;width: 100%;padding: 36rpx;box-sizing: border-box;">
			<image src="/static/icon/close.png" style="height: 40rpx;width: 40rpx;" @click="this.$refs.popup.close()">
			</image>
		</view>
		<view style="padding: 40rpx 0;display: flex;align-items: center;justify-content: center;width: 100%;">
			<view
				style="display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;font-size: 34rpx;">
				<view style="margin-bottom: 40rpx;">
					请填写真实信息 审核后不可修改
				</view>
				<view style="margin-bottom: 20rpx;line-height: 50rpx;"><text
						style="color: #62748E;">真实姓名：</text>{{name}}
				</view>
				<view style="line-height: 50rpx;"><text style="color: #62748E;">身份证号：</text>{{idCard}}
				</view>
			</view>
		</view>
		<view class="from_btn_box">
			<view class="reset" @click="this.$refs.popup.close()">返回修改</view>
			<view class="submit" @click="submit">确认</view>
		</view>
	</uni-popup>
</template>

<script>
	import api from '@/utils/api.js';
	export default {
		data() {
			return {
				name: '',
				idCard: '',
				step: 1
			}
		},
		methods: {
			popup() {
				if (!this.name) {
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'error',
						duration: 1500
					})
					return;
				}
				if (!this.idCard) {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'error',
						duration: 1500
					})
					return;
				}
				if (!this.validateIDCard(this.idCard)) {
					uni.showToast({
						title: '错误的身份证号格式',
						icon: 'none',
						duration: 1500
					})
					return;
				}
				this.$refs.popup.open();
			},
			// 验证身份证号码的正则表达式
			validateIDCard(idCard) {
				// 18位身份证正则表达式
				const reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

				// 15位身份证正则表达式（旧版）
				const reg15 = /^[1-9]\d{5}\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{2}$/;

				return reg.test(idCard) || reg15.test(idCard);
			},
			async submit() {
				this.$refs.popup.close();
				let {
					result
				} = await api.auth_verify({
					name: this.name,
					idCard: this.idCard
				});
				if (result.code == 200) {
					this.step = 2;
				} else {
					this.step = 3;
				}
			},
		}
	}
</script>

<style>
	.i {
		color: #90A1B9;
		font-size: 26rpx;
		line-height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 678rpx;
		margin-left: 36rpx;
		margin-top: 20rpx;
		flex-wrap: wrap;
	}

	.i navigator {
		color: #1447E6;
		margin-left: 10rpx;
	}

	.input_box {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		gap: 36rpx;
		color: #62748E;
	}

	.input_box input {
		flex: 1;
		height: 120rpx;
		color: #020618;
	}

	.btn {
		width: 678rpx;
		margin-left: 36rpx;
		font-size: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 30rpx;
		height: 100rpx;
	}

	.bg {
		height: 100vh;
		width: 100vw;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: column;
	}
</style>